/*
 * @Description: 全局样式
 * @Author: gino deng
 * @Date: 2025-01-29 23:44:23
 * @LastEditors: gino deng
 * @LastEditTime: 2025-02-09 00:37:53
 */
 
// 如果主容器有左右布局就在外层加该样式
 .OP7-sub-layout-L-R {
  display: flex;
  flex-direction: row;
  // width: 100%;
 }
//  主内容-左侧栏样式
 .OP7-left {
    flex-shrink: 0;  // 避免挤压主内容
    background: #ffff;
    padding: 16px;
    border-right: 1px solid #f0f0f0;
    margin-right: 16px;
    margin-top: 16px;
  }
  // 公共容器样式
 .app-container {
  padding: 24px;
  background: #fff;
  margin-top: 16px;
  min-width: 0;  // 让它不会溢出
  flex: 1;  // 让它自动填充父级剩余空间
  display: flex;  // 确保内部元素也能伸展
  flex-direction: column;  // 让子元素从上往下排列
  // 修改ant button全局按钮样式，不包括table-cell-actions的
  .ant-btn:not(.table-cell-actions .ant-btn):not(.tab-btn .ant-btn) {
    border-radius: 2px;
    height: 32px;
    width: 82px;
    text-align: center;
    line-height: 32px;
    margin: 0;
    border: none;
    background-color: #f2f3f5;
    color: #4e5969;
    img {
      width: 14px;
      height: 14px;
    }
    &:hover {
      color: #4e5969!important;
      border: none;
      background-color: #f2f3f5!important;
    }
    &.ant-btn-primary {
      background: #165dff!important;
      margin-bottom: 20px;
      color: #ffffff!important;
      &:hover {
        color: #ffffff;
        background: #165dff;
      }
    }
  }
  .filterForm {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid #e5e6eb;
    padding-bottom: 45px;
    .form, .ant-form {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      max-width: none !important;
      .field, .ant-form-item {
        display: flex;
        align-items: center;
        .label, .ant-form-item-label {
          width: 64px;
          margin-right: 16px;
          text-align: right;
          color: #4e5969;
        }
        .value, .ant-form-item-control {
          width: 243px;
          .ant-input-outlined,
          .ant-input,
          .ant-select .ant-select-selector,
          .ant-picker {
            background-color: #f2f3f5;
            border: none;
            border-radius: 2px;
          }
          // 重写 Input 样式
          .ant-input-outlined,
          .ant-input {
            &:hover, &:focus {
              background-color: #f2f3f5;
              box-shadow: none;
            }
          }

          // 重写 Select 样式
          .ant-select {
            &:hover {
              .ant-select-selector {
                background-color: #f2f3f5;
              }
            }
            &.ant-select-focused {
              .ant-select-selector {
                box-shadow: none;
              }
            }
          }

          // 重写 DatePicker 样式
          .ant-picker {
            &:hover {
              background-color: #f2f3f5;
            }

            &.ant-picker-focused {
              box-shadow: none;
            }

            input {
              background-color: #f2f3f5;
            }
          }
        }
      }
    }
    .rightAction {
      display: flex;
      flex-direction: column;
      padding-left: 20px;
      border-left: 1px solid #e5e6eb;
    }
  }
  // 表头主按钮
  .table-operations {
    margin: 21px 0 25px;
    button {
      margin-right: 8px !important;
      border-radius: 2px;
    }
  }
  // 列表中的操作按钮样式
  .table-cell-actions {
    button {
      padding: 5px;
    }
  }
  // 表格样式调整
  .ant-table-wrapper {
    .ant-table {
      border-radius: 2px;

      .ant-table-thead > tr > th {
        background: #fafafa;
      }
    }
    // 分页样式
    .ant-pagination {
      .ant-pagination-total-text {
        color: #86909C;
        margin-right: 16px;
      }

      .ant-pagination-item {
        border-radius: 2px;
        border: none;
        
        a {
          color: #4E5969;
        }

        &.ant-pagination-item-active {
          background: #e8f3ff;
          
          a {
            color: #165dff;
          }
        }
      }

      .ant-pagination-prev,
      .ant-pagination-next {
        .ant-pagination-item-link {
          border-radius: 2px;
          border: 1px solid #E5E6EB;
          color: #4E5969;
        }
      }

      .ant-select-selector {
        border-radius: 2px !important;
        border: 1px solid #E5E6EB !important;
        color: #4E5969;
      }

      .ant-pagination-options-quick-jumper {
        color: #86909C;
        
        input {
          border-radius: 2px;
          border: 1px solid #E5E6EB;
          
          &:hover, &:focus {
            border-color: #165DFF;
          }
        }
      }
    }
  }
}
// 详情页
.add-app-detail {
  position: relative;
  margin-top: 16px;
  min-height: calc(100vh - 120px);

  .basic-info {
    background: #fff;
    padding: 24px;
    margin-bottom: 15px;
    border-radius: 4px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #1d2129;
      margin-bottom: 24px;
    }
    .ant-form {
      max-width: 600px;
      .ant-form-item-label {
        label {
          color: #4e5969;
        }
      }
      .ant-input,
      .ant-input-textarea {
        background-color: #f2f3f5;
        border: none;
        border-radius: 2px;
        &:hover, &:focus {
          background-color: #f2f3f5;
          box-shadow: none;
        }
      }
      .update-config {
        margin-top: 40px;
        .title {
          font-size: 16px;
          font-weight: 500;
          color: #1d2129;
          margin-bottom: 24px;
        }
      }
    }
    .form-group {
      display: flex;
      gap: 113px;
    }
  }
  .form-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 16px 24px;
    display: flex;
    justify-content: center;
    gap: 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    z-index: 100;
    .ant-btn {
      border-radius: 2px;
    }
  }
} 